@import "common.scss";
.warp{
    height: 100%;
    width: 100%;
    background: #efefef;
    .top{
        box-sizing: content-box;
        height: pr(100);
        background: #ff841d;
        border-bottom: pr(2) solid #e6e6e6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 pr(14) 0 pr(34);
        .logo{
            height:pr(50);
        }
        .download{
            width: pr(68);
        }
    }

    .search{
        height: pr(100);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 pr(20);
        border-bottom: pr(2) solid #e6e6e6;
        .box{
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            input{
                width: 100%;
                height: pr(60);
                border: none;
                outline: none;
                background: #f1f1f1;
                border-radius: pr(40);
                padding-left: pr(36);
                font-size: pr(32);
                margin: 0;
            }
            button{
                position: absolute;
                top:0;
                right: pr(0);
                height: pr(60);
                width: pr(125);
                background: #ff841d;
                color: #fff;
                font-size: pr(32);
                border-radius: pr(40);
                border: none;
                outline: none;
                padding: 0;
            }
        }
    }

    .list{
        padding: pr(10);
        .mui-table-view {
            position: relative;
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
            background-color: #ebebeb;
            border: pr(2) solid #ccc;
            border-radius: pr(12);
            .mui-table-view-cell{
                border-bottom: 1px solid #ccc;
                a{
                    font-size: pr(32);
                    font-weight: bold;
                    padding: pr(21) pr(32);
                }
                .mui-collapse-content{
                    padding: 0;
                    ul{
                        width: 100%;
                        display: flex;
                        flex-flow: wrap;
                        margin-left: pr(-1);
                        background: #f9f9f9;
                        li{
                            width: 33.3333333333%;
                            height: pr(80);
                            line-height: pr(80);
                            text-align: center;
                            border-bottom: pr(1) solid #ccc;
                            border-right: pr(1) solid #ccc;
                            margin-bottom: pr(-1);
                            &:nth-child(3n+3){
                                border-right: none;
                            }
                            a{
                                display: block;
                                width: 100%;
                                height: 100%;
                                font-size: pr(28);
                                color:#333;
                                font-weight: normal;
                                padding: 0;
                            }
                        }
                    }
                }
                &:last-child{
                    border-bottom: none;
                    
                }
                &.active{
                    border-bottom: pr(4) solid #888;
                }
            }
            .mui-table-view-cell.mui-collapse.mui-active {
                margin-top: 0px;
            }
            .mui-table-view-cell:after {
                background-color: transparent;
            }
        }
        
    }

    .footer{
        margin-top: pr(50);
        .loginbox{
            display: flex;
            align-items: center;
            height: pr(70);
            border-top: pr(2) solid #ccc;
            border-bottom: pr(2) solid #ccc;
            .regist{
                height: pr(70);
                line-height: pr(70);
                border-left: pr(2) solid #ccc;
                border-right: pr(2) solid #ccc;
            }
            a{
                flex: 1;
                color: #5a5a5a;
                font-size: pr(28);
                text-align: center;
            }
        }
        .copyright{
            text-align: center;
            font-size: pr(24);
            margin-top: pr(35);
            p{
              color: #5a5a5a;  
              font-size: pr(24);
              margin: 0;
            }
            .download{
                color: red;
            }
            
            a{
                color: #5a5a5a;
                font-size: pr(24);
            }
        }

    }
    

}